import React from 'react';
import {Card, Button, Form, message} from 'antd';
import BaseForm from './../../components/BaseForm';
import ETable from './../../components/ETable';
import Utils from './../../utils/utils';
import axios from './../../axios';

export default class User extends React.Component {

    params = {
        page:1
    }

    state = {
        isVisible:false
    }

    formList = [
        {
            type:'城市',
            field:'city',
            placeholder:'全部',
            initialValue:'1',
            width:80
        },
        {
            type:'INPUT',
            label:'用户名',
            field:'username',
            placeholder:'姓名',
            width:200
        },
        {
            type:'SELECT',
            label:'订单状态',
            field:'order_status',
            placeholder:'全部',
            initialValue: '0',
            width:150,
            list:[ { id:'0', name:'全部' } , { id:'1' , name:'进行中' }, { id:'2' , name:'结束' }]
        },
        {
            type:'CHECKBOX',
            label:'状态',
            field:'status'
        },
        {
            type:'DATE',
            label:'生日',
            field:'birthday'
        }
    ]

    componentDidMount(){
        this.requestList();
    }

    requestList = ()=>{
        axios.requestList(this,'/user/list',this.params);
    }

    handleFilter = (params)=>{
        this.params = params;
        message.success('过滤成功'+this.params.username);
        this.requestList();
    }

    render(){
        const columns = [
            {
                title:'id',
                dataIndex:'id'
            },{
                title: '用户名',
                dataIndex: 'userName'
            }, {
                title: '性别',
                dataIndex: 'sex',
                render(sex){
                    return sex == 1?'男':'女'
                }
            }, {
                title: '状态',
                dataIndex: 'state',
                render(state){
                    return {
                        '1':'咸鱼一条',
                        '2':'风华浪子',
                        '3':'北大才子一枚',
                        '4':'百度FE',
                        '5':'创业者'
                    }[state]
                }
            }, {
                title: '爱好',
                dataIndex: 'interest',
                render(interest){
                    return {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6':'骑行',
                        '7':'桌球',
                        '8':'麦霸'
                    }[interest]
                }
            }, {
                title: '生日',
                dataIndex: 'birthday'
            }, {
                title: '联系地址',
                dataIndex: 'address'
            }, {
                title: '早起时间',
                dataIndex: 'time'
            },
        ]
        
        return(
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
                </Card>
                <Card style={{marginTop:10}} className="operate-wrap">
                    <Button type="primary" icon="plus" >创建员工</Button>
                    <Button type="primary" icon="edit" >编辑员工</Button>
                    <Button type="primary" >员工详情</Button>
                    <Button type="primary" icon="delete" >删除员工</Button>
                </Card>
                <div className="content-wrap">
                    <ETable
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        columns = {columns}
                        dataSource={this.state.list}
                        selectedRowKeys={this.state.selectedRowKeys}
                        selectedItem={this.state.selectedItem}
                        pagination={this.state.pagination}
                    ></ETable>
                </div>
            </div>
        );
    }
}